<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="../css/details.css">
</head>
<body>
<div id = "details" >
    <div class="publicTop">
        <iframe src="top.html" width="100%" height="100%" frameborder="0"></iframe>
    </div>
    <div class="movieInfo">
        <div v-on:click="goVideo(this.id)" id="movieImg" class="movieImg">
            <img v-bind:src="'../movieImg/'+movie.movieImgPath" style="display: flex;width: 100%;height: 100%">
        </div>
        <div id="movieDetails" class="movieDetails">
            <div class="movieName">{{movie.movieName}}</div>
            <div class="movieName" style="font-size: 20px">{{movie.translateName}}</div>
            <br>
            <div class="movieDetail">
                {{movie.type}}<br>
                {{movie.area}}<br>
                {{movie.showTime}}
            </div>
            <div class="buttonSet">
                <div class="button">
                <input class="button1" type="button" value="想看">
                <input class="button1" type="button" value="评分">
                </div>
                <input class="button2" type="button" value="特惠购票">
            </div>

        </div>

        <div id="movieScore" class="movieScore">
            <div style="color: white">猫眼口碑</div>
            <div style="color: orange;font-size: 30px;display: flex" >9.5
                <div style="color: white;font-size: 10px;margin-left: 10px;margin-top: 15px">
                {{movie.playingScore}}万人评分
                </div>
            </div>
            <div style="color: white">累计票房</div>
            <div style="color: white;font-size: 30px" >3.98亿</div>

        </div>
    </div>

</div>
<script src="../js/vue.js"></script>
<script src="../js/axios.main.js"></script>
<script>
    var urlDate = new URLSearchParams(location.search);
    var id = urlDate.get("id");
    var details = new Vue({
        el:"#details",
        data:{
            movie: ""
        },
        methods:{
            goVideo:function (id){
                //将电影参数传递给播放器页
                location.href="moviePlayer.html?id="+id;
            },
            getMovieInfo:function (){
                axios.get("http://localhost:8081/getMovieById?id="+id)
                .then((result)=>{
                    this.movie=result.data
                    console.log(result);
                })
                .catch()
            }
        },
        created(){
            this.getMovieInfo(id);
        }

    })
</script>
</body>
</html>